<script setup lang="ts">
import {ref} from "vue";
import {useMenuApi, useMenuListApi} from "@/api/sys/menu";
import {ElPopover, ElInput, ElTree} from "element-plus";

const props = defineProps(["data", "callFun"])
const popoverEl = ref()
const menuList = ref([])
if(parseInt(props.data.id) !== 0){
  useMenuApi(props.data.id).then(res => {
    props.data.name = res.data.name
  })
}else {
  props.data.name = "一级菜单"
}

useMenuListApi(0).then(res => {
  menuList.value = res.data
})
function treeCurrentChange(data: any){
  props.callFun({
    id: data.id,
    name: data.name
  })
  popoverEl.value.hide()
}
</script>

<template>
<ElPopover placement="bottom-start" trigger="click" ref="popoverEl" width="180">
  <template #reference >
    <ElInput :value="props.data.name" readonly placeholder="上级菜单"></ElInput>
  </template>
    <ElTree
        ref="menuListTree"
        :data="menuList"
        :props="{ label: 'name', children: 'children' }"
        node-key="id"
        :highlight-current="true"
        :expand-on-click-node="false"
        accordion
        @current-change="treeCurrentChange"
    >
    </ElTree>
</ElPopover>
</template>
